<template>
  <div class="product-card-template">
    <div class="template-header">
      <h4>商品卡片模板</h4>
    </div>

    <div class="template-filter">
      <el-select v-model="selectedStyle" placeholder="选择样式" size="small">
        <el-option v-for="style in styles" :key="style.value" :label="style.label" :value="style.value" />
      </el-select>
    </div>

    <div class="templates-grid">
      <div 
        v-for="template in filteredTemplates" 
        :key="template.id" 
        class="template-item"
        @click="selectTemplate(template)"
      >
        <div class="template-preview">
          <img :src="template.preview" :alt="template.name" />
        </div>
        <div class="template-info">
          <div class="template-name">{{ template.name }}</div>
          <div class="template-size">{{ template.size }}</div>
        </div>
      </div>
    </div>

    <div v-if="selectedTemplate" class="template-detail-overlay">
      <div class="template-detail">
        <div class="detail-header">
          <h5>{{ selectedTemplate.name }}</h5>
          <el-button icon="el-icon-close" circle size="mini" @click="closeDetail"></el-button>
        </div>
        <div class="detail-preview">
          <img :src="selectedTemplate.preview" :alt="selectedTemplate.name" />
        </div>
        <div class="detail-actions">
          <el-button type="primary" size="small" @click="useTemplate">使用模板</el-button>
          <el-button size="small" @click="customizeTemplate">自定义</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['apply-template']);

// 模板样式选择
const selectedStyle = ref('all');
const styles = [
  { label: '全部样式', value: 'all' },
  { label: '简约风格', value: 'simple' },
  { label: '活力风格', value: 'active' },
  { label: '高端风格', value: 'premium' },
  { label: '扁平化', value: 'flat' }
];

// 卡片模板数据
const templates = [
  { 
    id: 'pc1', 
    name: '简约商品卡', 
    preview: '/images/commerce/products/card1.jpg', 
    size: '300x400', 
    style: 'simple'
  },
  { 
    id: 'pc2', 
    name: '双重优惠卡', 
    preview: '/images/commerce/products/card2.jpg', 
    size: '300x400', 
    style: 'active'
  },
  { 
    id: 'pc3', 
    name: '高端展示卡', 
    preview: '/images/commerce/products/card3.jpg', 
    size: '300x450', 
    style: 'premium'
  },
  { 
    id: 'pc4', 
    name: '扁平商品卡', 
    preview: '/images/commerce/products/card4.jpg', 
    size: '300x350', 
    style: 'flat'
  },
  { 
    id: 'pc5', 
    name: '简约竖版卡', 
    preview: '/images/commerce/products/card5.jpg', 
    size: '250x500', 
    style: 'simple'
  },
  { 
    id: 'pc6', 
    name: '功能型商品卡', 
    preview: '/images/commerce/products/card6.jpg', 
    size: '350x400', 
    style: 'active'
  }
];

// 根据筛选条件过滤模板
const filteredTemplates = computed(() => {
  if (selectedStyle.value === 'all') {
    return templates;
  }
  return templates.filter(template => template.style === selectedStyle.value);
});

// 模板选择与操作
const selectedTemplate = ref(null);

function selectTemplate(template) {
  selectedTemplate.value = template;
}

function closeDetail() {
  selectedTemplate.value = null;
}

function useTemplate() {
  if (selectedTemplate.value) {
    emit('apply-template', selectedTemplate.value);
    selectedTemplate.value = null;
  }
}

function customizeTemplate() {
  if (selectedTemplate.value) {
    emit('apply-template', { ...selectedTemplate.value, customize: true });
    selectedTemplate.value = null;
  }
}
</script>

<style scoped>
.product-card-template {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.template-header {
  margin-bottom: 15px;
}

.template-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.template-filter {
  margin-bottom: 20px;
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
  flex: 1;
}

.template-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
}

.template-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #c6e2ff;
}

.template-preview {
  width: 100%;
  height: 140px;
  background-color: #f5f7fa;
}

.template-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-info {
  padding: 8px;
}

.template-name {
  font-size: 13px;
  color: #303133;
  margin-bottom: 4px;
}

.template-size {
  font-size: 12px;
  color: #909399;
}

.template-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.template-detail {
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h5 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.detail-preview {
  padding: 20px;
  background-color: #f5f7fa;
  text-align: center;
}

.detail-preview img {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.detail-actions {
  padding: 12px 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #ebeef5;
}
</style>